<template>
  <div class="main-content">
    <div style="display: flex; align-items: flex-start; grid-gap: 10px;">

      <div style="width: 150px;" class="card">

        <div v-for="item in categoryList">
          <div class="category-item" :class="{ 'category-item-active': item.name === current }" :key="item.id"
          @click="selectCategory(item.name)">{{ item.name }}</div>
        </div>

      </div>

      <div style="flex: 1;">
        <blog-list :categoryName="current" ref="blogListRef"></blog-list>   <!--  <BlogList />写成这种大驼峰的形式也可以     -->
        <Footer />
      </div>

      <div style="width: 260px">
        <div class="card" style="margin-bottom: 10px;">
          <div style="font-size: 20px; font-weight: bold;">{{ this.user.name || '游客' }}，欢迎您！ 😊</div>
          <a href="/weblog/person"><div style="color: #666;">用博客记录美好一天</div></a>
        </div>

        <div style="margin-bottom: 10px;">
          <div v-for="item in topActivityList" :key="item.id" style="margin-top: 10px;">
            <a :href="'/front/activityDetail?activityId=' + item.id" target="_blank"><img :src="item.cover" style="width: 100%; border-radius: 5px;" alt=""></a>
          </div>
        </div>

        <div style="color: #666; line-height: 30px; padding: 0 10px;" v-if="false">
          <div>举报邮箱： 26425459659@163.com</div>
          <div>座机电话： 0795-3280666</div>
          <div>赣ICP备1593765F©2025 风中叶</div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>

import Footer from "@/components/Footer";
import BlogList from "@/components/BlogList"
export default {
  components: {
    BlogList,
    Footer
  },
  data() {
    return {
      current: '全部博客',      //当前选中的分类名称
      categoryList: [],
      topList: [],       //请求到的全部数据
      showList: [],     //用来展示的数据
      lastIndex: 0,     //一次只展示前5条数据
      topActivityList: [],
      user: JSON.parse(localStorage.getItem('weblog') || '{}'),
    }
  },
  mounted() {
    this.load()

    this.refreshTop()     //页面一刷新就获取最新的数据

    this.loadTopActivity()
  },
  // methods：本页面所有的点击事件或者其他函数定义区
  methods: {
    loadTopActivity() {
      this.$request.get('/activity/selectTop').then(res => {
        this.topActivityList = res.data || []
      })
    },
    selectCategory(categoryName) {
      this.current = categoryName
      //this.$refs.blogListRef.loadBlogs(1)    // 调用组件BlogList中的查询方法

      //this.loadBlogs(1)     // 分页 BlogList组件封装了该方法
    },
    load() {
      //请求分类数据
      this.$request.get('/category/selectAll').then(res => {
        this.categoryList = res.data || []
        this.categoryList.unshift({ name: '全部博客' })
      })
    },

    refreshTop() {
      //请求分类数据
      this.$request.get('/blog/selectTop').then(res => {
        this.topList = res.data || []
        let i = 1
        this.topList.forEach(item => item.index = i++)
        if (this.lastIndex === 10) {    //也就是说榜单一共就只展示10条数据
          this.lastIndex = 0
        }
        this.showList = this.topList.slice(this.lastIndex,this.lastIndex+5)       //一次只展示前5条数据 0-5   5-10
        this.lastIndex += 5   // 5  10  5
      })
    }
  }
}
</script>
<style>
.category-item {
  text-align: center;
  padding: 10px 0;
  font-size: 16px;
  cursor: pointer;
}
.category-item-active {
  background-color: #1890ff !important;
  color: #fff;
  border-radius: 5px;
}

a {
  color: #333;
}
</style>
